@btnW: 180px;
@btnH: 80px;
@txtWhite: rgba(255, 255, 255, 0.8);
@property --angle {
  syntax: '<angle>';
  initial-value: 145deg;
  inherits: false;
}
@keyframes rotateAni {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}
.button {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding: 3px;
  transition: transform 0.2s;
  transform: scale(0.96);
  outline: none;
  border: none;
  background: none;
  &:active {
    transform: scale(0.95) !important;
  }
  &.success {
    .txtClip {
      transform: rotateX(180deg) translateZ(6px);
      &:nth-child(2) {
        transform: rotateX(360deg) translateZ(6px);
      }
    }
    .txt {
      background-position: 0% 0%;
    }
  }
  &:hover {
    transform: scale(1);
    .before {
      animation-play-state: running;
    }
    .after {
      opacity: 1;
      animation-play-state: running;
    }
  }
  .inner {
    display: block;
    position: relative;
    width: @btnW;
    height: @btnH;
    border-radius: @btnW;
    background: rgba(202, 192, 255, 0.7);
    transform-style: preserve-3d;
    perspective: 100px;
  }
  .txtClip {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transform: rotateX(0deg) translateZ(6px);
    transition: all 0.5s ease-in-out;
    transition-delay: 2s;
    backface-visibility: hidden;
    &:nth-child(2) {
      transform: rotateX(180deg) translateZ(6px);
    }
  }
  .txt {
    display: inline-block;
    background-image: linear-gradient(
      135deg,
      @txtWhite,
      @txtWhite 30%,
      transparent 30%,
      transparent 35%,
      #3316e8 35%,
      #7d07d8,
      #86048e 66%,
      transparent 65%,
      transparent 70%,
      @txtWhite 70%,
      @txtWhite 100%
    );
    background-size: 400%;
    background-position: 100% 0%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 23px;
    font-weight: bold;
    transition: all 2s ease-in-out;
  }
}
.before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: @btnW;
  background-image: linear-gradient(
    var(--angle),
    #cd0ad9,
    #8006de,
    #4982e9 90%
  );
  animation: rotateAni 2.5s linear infinite;
  animation-play-state: paused;
}
.after {
  position: absolute;
  top: 6%;
  left: 6%;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: @btnW;
  filter: blur(@btnH * 0.3);
  background-image: linear-gradient(
    var(--angle),
    #d42ede,
    #d2abf0,
    #3f7dec 90%
  );
  transform: scaleY(0.9) scaleX(0.95);
  animation: rotateAni 2.5s linear infinite;
  transition: all 0.5s;
  opacity: 0;
}
